<style>
	.c1{
		display: grid;
		grid-template-rows: 300px auto;
		
	}
	uni-page-body,.c1,.c2{
		height: 100%;
	}
	.c3{
		text-align: center;
		display: grid;
		grid-template-rows:  auto 50px auto;
/*		background: url(/static/bg.jpg);*/
  		background-size: 100% 130%;
  		animation: moveBackground 30s linear infinite;
/*  		background-blend-mode: multiply;*/
/*  background-color: #ccccccbf;*/
		background: linear-gradient( #2aae67,#2aae6700 ) !important;

	}
	@keyframes moveBackground{
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 0 100%;
		}
	}

	.c4{
		line-height: 50px;
		font-size: 24px;
		font-weight: bold;
	}
	
	.c0but{
		border-radius: 45px;
		background: #ff5f2e;
  color: #fff;
  font-weight: bold;
  border:none !important;
  line-height: 45px !important;
  height: 45px !important;

	}
	uni-button::after{
		border:none !important;
	}
	.uni-list-cell{
		display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 10px;
  font-size: 12px;
	}
	.c6{
		padding-left: 15px;
  		padding-right: 15px;
  		padding-top: 20px;
	}
	.c7{
		padding-left: 15px;
  		padding-right: 15px;
  		line-height: 45px;
  		border-top: 1px solid #eee;
	}
	.br{
		margin-top: 30px;
	}
	.border{
		border-bottom: 1px solid #eee;
	}
	.c10{
/*		display: none;*/
	}

	.uni-list-cell-left{
		text-align: right;
	}
</style>

<template>
	<view class="c2">
		<view class="c1">
			<view class="c3">
				<view></view>
				<view class="c4">
					
					
				
						{{title}}

					
				</view>
				<view></view>
			</view>

			<view class="c5">
				<!-- <div class="uni-tabbar-border" style="background-color: rgba(0, 0, 0, 0.33);height: 1px;"></div> -->
				<view class="c6">
					<button class="c0but" @click="to">{{butTiele}}</button>
				</view>

				<view class="uni-list c7 br">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							消费类型
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
								<view class="uni-input">{{array[index].name}}</view>
							</picker>
						</view>
					</view>
				</view>

				<view class="uni-list c7 border">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							就餐类型
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange1" :value="index1" :range="array1" range-key="name">
								<view class="uni-input">{{array1[index1].name}}</view>
							</picker>
						</view>
					</view>
				</view>

		

			</view>



		</view>
	</view>
</template>

<script>
	import cailist from "@/data/data.js";
	import gcailist from "@/data/data.js";

	export default {
		
		data() {
			return {
				array: [{name:'不限'},{name: '随便凑合'}, {name:'大吃一顿'}],
				index: 0,
				array1: [
					{name: '不限'},
					{name: '早餐'}, 
					{name: '午餐'}, 
					{name: '晚餐'},
					{name: '夜宵'}
				],
				index1:0,
				styleshow:false,
				cailist:cailist.cailist,
				gcailist:gcailist.cailist,
				xftype:0,
				caitype:0,
				buts:1000,
				title:"今天吃什么?",
				id:0,
				count:0,
				nCailist:[],
				butTiele:"开始!"
			}
		},
		onLoad(){
			
			let gFans=uni.getStorageSync("fans");

			uni.setStorageSync('fans', true);
			if (!gFans) {
				let sscailist=this.cailist;
				sscailist.reverse();
				this.cailist=sscailist;

				uni.setStorageSync('gcailist', JSON.stringify(sscailist));

				let cailists=uni.getStorageSync("cailist");
				if (!cailists) {
					uni.setStorageSync('cailist', JSON.stringify(this.cailist));
				}else{
					cailists=JSON.parse(cailists);
					this.cailist=cailists;
				}
				
			}
	
			// let cailists=localStorage.getItem("cailist");
			// if (!cailists) {
			// 	localStorage.setItem('cailist', JSON.stringify(this.cailist));
			// }else{
			// 	cailists=JSON.parse(cailists);
			// 	this.cailist=cailists;
			// }

			
			
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value);
				if(!e.detail.value){
					this.xftype=0;
				}else{
					this.xftype=e.detail.value;
				}
				
				this.index = e.detail.value;
			},
			bindPickerChange1(e){
				console.log('picker发送选择改变，携带值为：' + e.detail.value)

				if(!e.detail.value){
					this.caitype=0;
				}else{
					this.caitype=e.detail.value;
				}

				this.caitype=e.detail.value;
				this.index1 = e.detail.value
			},
			change(){
				if (this.buts==2000) {

					if (this.id==this.count) {
						this.id=0;
					}
					this.title=this.nCailist[this.id].name;
					this.id+=1;
					setTimeout(this.change,50);
				}
				
			},
			call(){

				var caiId;
	    		var loadokcai=[];
	    		// caiId=localStorage.getItem('okcai');
	    		caiId=uni.getStorageSync("okcai");
	    		if(caiId){
	    			caiId=JSON.parse(caiId);
	    			// caiId[0]=JSON.parse(caiId[0]);
	    		}
	    		

	    		var sCaiId=[];
	    		if(caiId){
	    			

		    		var gName=0;

		    		if( caiId.length > 0 ){

		    			for ( var i = 0; i < caiId.length ; i++ ) {
		    				if(caiId[i].name==this.title){

		    					caiId[i].value=caiId[i].value+1;
		    					gName++;
		    		
		    				}

		    			}

		    			if(gName==0){
		    				var ctitle=this.title;
		    				caiId.push({value:1,name:ctitle});
		    			}

		    		}else if(caiId.length==0){
		    
		    			if (caiId[0].name==this.title) {
		    				caiId[0].value=caiId[0].value+1;
		    			}else{

		    				// caiId.push({count:1, name:this.title});
		    				caiId={value:1, name:this.title};
		    			}

		    		}

		    		
	    		}else{

		    		caiId=[{value:1, name:this.title}];
	    		}
	    		// loadokcai.push(caiId);
	    		loadokcai=caiId;
	    		// localStorage.setItem('okcai', JSON.stringify(loadokcai));
	    		uni.setStorageSync('okcai', JSON.stringify( loadokcai ) );

			},
			to(){
				if (this.buts==1000) {
					// 
					// let cailists=localStorage.getItem("cailist");
					// if (!cailists) {
					// 	localStorage.setItem('cailist', JSON.stringify(this.cailist));
					// }else{
					// 	cailists=JSON.parse(cailists);
					// 	this.cailist=cailists;
					// }
					// 
					let cailists=uni.getStorageSync("cailist");
					if (!cailists) {
						uni.setStorageSync('cailist', JSON.stringify(this.cailist));
					}else{
						cailists=JSON.parse(cailists);
						this.cailist=cailists;
					}


					this.buts=2000;

					this.nCailist=[];
			

					if(this.xftype==0 ){
						this.nCailist=this.cailist;
							
					}else{
						var caitypesindex=0;
						
						

						for ( var i = 0;i < this.cailist.length ; i++ ) {
							if(this.cailist[i].xftype=="随便凑合" && this.xftype==1 ){

								

								if(this.caitype==0){

									this.nCailist.push(this.cailist[i]);
									continue;
								}
								if (this.caitype > 0) {
									caitypesindex=this.caitype-1;
								}
								if (this.caitype==0) {
									this.nCailist.push(this.cailist[i]);
									continue;
								}	
								if(this.cailist[i].caitype[caitypesindex]==1){
									this.nCailist.push(this.cailist[i]);
									continue;
								}
											
							}
							if(this.cailist[i].xftype=="大吃一顿" && this.xftype==2 ){

								if(this.caitype==0){
									this.nCailist.push(this.cailist[i]);
									continue;
								}
								if (this.caitype > 0) {
									caitypesindex=this.caitype-1;
								}
								if (this.caitype==0) {

									this.nCailist.push(this.cailist[i]);
									continue;
								}	
								if(this.cailist[i].caitype[caitypesindex]==1){
									this.nCailist.push(this.cailist[i]);
									continue;
								}	
									
							}
						}
					}
					
					var arrcai=[];
					let indexs=0;
					for (var i = 0; i < this.nCailist.length ; i++) {
						if( this.nCailist[i].status==true ){
							arrcai[ indexs ]=this.nCailist[i];
							indexs++;
						}
					}
					this.nCailist=[];
					this.nCailist=arrcai;
					
					console.log(this.nCailist);
					
					this.count=this.nCailist.length-1;

					this.butTiele="决定了!";

					this.change();
					
				}else{


					this.buts=1000;
					const gTitle="今天就吃"+this.title;

					
					
					uni.showModal({
						title:"叮 ~",
					    content: gTitle,
					    // cancelText:"不吃， 换",
					    // confirmText:"好",
					    success: (e)=>{
					    	if(e.confirm){
						    	this.call();
						    	this.butTiele="下一个!";
						    }
					    	
					    }
					});

					
					
					
				}

			}
		}
	}
</script>

